<template>
	<view>
		<!-- 步骤条 -->
		<view class="step">
			<uni-steps :options="option" :active="0" active-color="#00C6C2"></uni-steps>
		</view>
		<!-- 个人身份证 -->
		<view class="verification">
			<view class="head">
				<view class="tex1">个人身份证</view>
				<view class="text2">（或其他有效身份证件）</view>
				<view class="text3">
					<text>示例照片</text><text class="icon iconfont">&#xe627;</text>
				</view>
			</view>
			<view class="id_pic">
				<view class="pic">
					<image src="../../static/renzheng/sfz1.png" mode=""></image>
					<view class="upface">
						<text>+ 点击上传人面像</text>
					</view>
				</view>
				<view class="pic">
					<image src="../../static/renzheng/sfz2.png" mode=""></image>
					<view class="upface">
						<text>+ 点击上传人面像</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 实名认证 -->
		<view style="padding: 21rpx 26rpx; background: #F3F3F3; color: #818181;font-size: 26rpx;">实名认证</view>
		<!-- 信息填写 -->
		<view class="inforPull">
			<view class="message">
				<view class="name">姓名</view>
				<view class="Input">
					<input type="text" placeholder="请输入本人姓名" v-model="form.name">
				</view>
			</view>
			<view class="message">
				<view class="name">性别</view>
				<view class="Input" style="height: 50rpx;">
					<label class="radio">
						<radio-group name="" @change='change'>
							<radio value="男" style="transform: scale(0.5);" /><text>男</text>
							<radio value="女" style="transform: scale(0.5); " /><text>女</text>
						</radio-group>

					</label>
				</view>
			</view>
			<view class="message">
				<view class="name">身份证号</view>
				<view class="Input">
					<input type="text" placeholder="请输入本人姓名" v-model="form.id_card">
				</view>
			</view>
			<view class="message">
				<view class="name">邮件信息</view>
				<view class="Input">
					<input type="text" placeholder="请输入本人姓名" v-model="form.email">
				</view>
			</view>
			<view class="message">
				<view class="name">手机号</view>
				<view class="Input">
					<input type="text" placeholder="请输入本人姓名" v-model="form.phone">
				</view>
			</view>
			<view class="message">
				<view class="name">验证码</view>
				<view class="Input">
					<input type="text" placeholder="请输入本人姓名" v-model="form.code">
				</view>
			</view>
			<view class="btm-ver">人脸验证（您的验证信息只会用于实人认证审核）</view>
			<view class="veri">
				<view style="width: 80%;">人脸验证</view>
				<view class="veri-1">
					<text>去验证</text>
					<image src="../../static/fan.png" mode=""></image>
				</view>
			</view>
			<view class="veri-2" @click="go()">
				<view>下一步</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				option: [{
					title: '身份认证'
				}, {
					title: '结算信息'
				}, {
					title: '完成支付'
				}, {
					title: '进度查看'
				}],
				index: 0,
				form: {
					name: '',
					sex: '',
					id_card: '', //身份证
					email: '',
					phone: '',
					code: '' //验证码

				}
			}
		},
		methods: {
			change(e) {
				console.log(e)
			},
			//下一步
			go(){
				uni.navigateTo({
					url:"./agents_js_infor"
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #F3F3F3;
	}
</style>
<style scoped lang="less">
	//步骤
	.step {
		padding: 47rpx 25rpx;
		background-color: white;
		margin-bottom: 14rpx;
	}

	//身份验证
	.verification {
		padding: 32rpx 25rpx;
		background-color: white;

		.head {
			display: flex;

			.text1 {
				font-size: 32rpx;
				font-family: PingFang;
				font-weight: bold;
				color: #282828;
			}

			.text2 {
				font-size: 22rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #979797;
				line-height: 62rpx;
			}

			.text3 {
				flex: auto;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #979797;
				line-height: 62rpx;
				display: flex;
				justify-content: flex-end;

				.iconfont {
					font-size: 22rpx;
				}
			}
		}

		.id_pic {
			display: flex;
			// padding: 34rpx 24rpx;
			justify-content: space-between;
			// background: #F3F3F3;

			border-radius: 4rpx;

			.pic {
				width: 347rpx;
				height: 234rpx;
				padding: 21rpx 22rpx;
				border: 1rpx dashed #000000;
				background: #F3F3F3;
				border-radius: 4rpx;
				margin-right: 5rpx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
				}

				.upface {
					width: 212rpx;
					height: 50rpx;
					background: #414141;
					opacity: 0.6;
					border-radius: 4rpx;
					position: absolute;
					top: 50%;
					left: 50%;
					margin-left: -106rpx;
					margin-top: -25rpx;
					text-align: center;

					text {
						font-size: 22rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
			}
		}
	}

	//信息填写
	.inforPull {
		// 
		background: white;

		.message {
			// width: 100%;
			padding: 31rpx 26rpx;
			border-bottom: 1rpx solid #E2E2E2;
			display: flex;

			.name {
				flex: 0.5;
				font-size: 28rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #282828;
			}

			.Input {
				float: 6;
				flex: auto;

				input {

					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #979797;
				}
			}
		}

		.btm-ver {
			padding: 20rpx;
			color: #666;
			background-color: #F1F1F1;
			font-size: 24rpx;
		}

		.veri {
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.veri-1 {
				width: 20%;
				display: flex;
				align-items: center;

				image {
					width: 10rpx;
					height: 20rpx;
					margin-left: 15rpx;
				}
			}
		}

		.veri-2 {
			padding: 30rpx;
			background-color: #F1F1F1;

			view {
				width: 100%;
				background-color: #00c6c2;
				line-height: 80rpx;
				text-align: center;
				color: #FFFFFF;
			}
		}
	}

	.radio {
		margin-left: -72rpx;

	}

	radio-group {
		transform: translateY(-50rpx);

	}
</style>
